<template>
    <component :is="title ? Card : Div" :title="title">
        <a-row :gutter="[0, 0]" class="look-con">
            <template v-for="item in list">
                <template v-if="item.isTr">
                    <a-col :span="3" class="look-label" :style="getStyle(item, 'label')">{{ item.name }}</a-col>
                    <a-col :span="21" class="look-val" :style="getStyle(item, 'val')">
                        <template v-if="isVNode(item.val)">
                            <component :is="item.val" />
                        </template>
                        <template v-else>{{ item.val }}</template>
                    </a-col>
                </template>
                <template v-else>
                    <a-col :span="3" class="look-label" :style="getStyle(item, 'label')">{{ item.name }}</a-col>
                    <a-col :span="5" class="look-val" :style="getStyle(item, 'val')">
                        <template v-if="isVNode(item.val)">
                            <component :is="item.val" />
                        </template>
                        <template v-else>{{ item.val }}</template>

                    </a-col>
                </template>
            </template>
        </a-row>
        <div class="bottom-div" v-if="!hideClose">
            <a-button @click="close" size="large">返回</a-button>
        </div>

    </component>
</template>
<script setup lang="ts">
import { isVNode, h, computed } from 'vue'
import type { VNode } from 'vue';
import { Card } from 'ant-design-vue';
export interface DetailType {
    name: string;
    val?: string | number | VNode,
    isTr?: boolean,
    height?: number
}
const props = defineProps<{
    title?: string,
    data: DetailType[],
    hideClose?: boolean
}>()

const emit = defineEmits<{
    close: []
}>()
const Div = h('div')
const list = computed<DetailType[]>(() => {
    if (!props.data) {
        return []
    }

    let arr = []
    for (let item of props.data) {
        if (arr.length == 0) {
            arr.push([item])
            continue
        }
       
        if (arr[arr.length - 1][0].isTr == item.isTr) {
            arr[arr.length - 1].push(item)
        } else {
            arr.push([item])
        }
    }

    for (let item of arr) {
        if(item[0].isTr){
            continue
        }
        if (item.length % 3 > 0) {
            let offset = 3 - item.length % 3
            for (let i = 0; i < offset; i++) {
                item.push({ name: '', val: '' })
            }
        }
    }

    let ret = []
    for(let item of arr){
        for(let a of item){
            ret.push(a)
        }
    }

    // let td = []
    // let tr = []
    // for (let item of props.data) {
    //     if (item.isTr) {
    //         tr.push(item)
    //     } else {
    //         td.push(item)
    //     }
    // }
    // if (td.length % 3 > 0) {
    //     let offset = 3 - td.length % 3
    //     for (let i = 0; i < offset; i++) {
    //         td.push({ name: '', val: '' })
    //     }
    // }

    return ret
})

const getStyle = (item: DetailType, type: string) => {
    let obj: any = {}
    if (item.height) {
        obj.height = item.height + 'px'
    }
    if (item.isTr && type == 'val') {
        obj['justify-content'] = 'left'
        obj.paddingLeft = '20px'
    }

    return obj
}

const close = () => {
    emit('close')
}

</script>
<style scoped>
.look-con {
    border-left: #d9d9d9 1px solid;
    border-top: #d9d9d9 1px solid;
}

.look-label {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    background: #eae9e9;
    border-right: #d9d9d9 1px solid;
    border-bottom: #d9d9d9 1px solid;
}

.look-val {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    border-right: #d9d9d9 1px solid;
    border-bottom: #d9d9d9 1px solid;
}

.bottom-div {
    padding: 30px 0;
    text-align: center;
}
</style>